<template>
    <div>
        <ul class="first">
            <li v-for="(v,i) in list" :key="i" v-show="v.isSelected">{{ v.x }}排{{ v.y }}座</li>
    
        </ul>
        <div @click="ddd">
            <button class="one" >2排1座</button>
            <button class="two" >2排2座</button>
            <button class="three" >2排3座</button>
            <button class="four">2排4座</button>
        </div>
        <ul class="dos">
            <li v-for="(v,i) in list" :key="i" v-show="v.isSelected">
                <input type="text" placeholder="请输入姓名" value="" v-model="v.name">
                <input type="text" placeholder="请输入手机号" name="" id="" v-model="v.phone">
            </li>
        </ul>
        <button @click="onSubmit">提交</button>
    </div>
</template>
<script>
export default {
data(){
    return{
        is:true,
        onlist:true,
        list:[
            {x:2,y:1,name:'',phone:'',isSelected:false},
            {x:2,y:2,name:'',phone:'',isSelected:false},
            {x:2,y:3,name:'',phone:'',isSelected:false},
            {x:2,y:4,name:'',phone:'',isSelected:false},
        ]
    }
},
methods:{
    ddd(e){
        console.log(this.onlist)
        if(e.target._prevClass==='one'){
            if(!this.list[0].isSelected){
                this.list[0].isSelected=true
            }else{
                this.list[0].isSelected=false
            }
        }
        if(e.target._prevClass==='two'){
            if(!this.list[1].isSelected){
                this.list[1].isSelected=true
            }else{
                this.list[1].isSelected=false
            }
        }
        if(e.target._prevClass==='three'){
            if(!this.list[2].isSelected){
                this.list[2].isSelected=true
            }else{
                this.list[2].isSelected=false
            }
        }
        if(e.target._prevClass==='four'){
            if(!this.list[3].isSelected){
                this.list[3].isSelected=true
            }else{
                this.list[3].isSelected=false
            }
        }
    },
    onSubmit(){
        let regs = /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/;
        let newlist=this.list.filter(v=>{
            return v.isSelected
        })
        
        
        let namelist = newlist.filter(v=>{
           return !v.name
        })
        let namelist1 = namelist.map(z=>{
           return z.y
        })
        let phonelist = newlist.filter(v=>{
            return !regs.test(v.phone)
        })
        let phonelist1 = phonelist.map(v=>{
            return v.y
        })
//         let repeatlist = newlist.findIndex(v=>{
// 　　　　    return this.list.forEach(z=>{
//                 z.name !== v.name
//             })
//         })
//         console.log(repeatlist,'111111')
        console.log(phonelist,phonelist1)
        if(newlist.length == 0){
           return alert('请先选择座位')
        }else if(namelist.length!==0){
           return alert(`请输入2排${parseInt(namelist1)}座姓名`)
        }else if(phonelist.length!==0){
           return alert(`请输入2排${parseInt(phonelist1)}座电话号码正确格式`)
        }else{
            alert('提交成功')
        }
        // if(newlist.length ===0){
        //     alert('请先选择座位')
        // }else if(!namelist){
        //     alert(`请输入2排${namelist+1}座姓名`)
        // }else if(!phonelist){
        //     alert(`请输入2排${phonelist+2}座电话号码正确格式`)
        // }
        
        
    }
},
}
</script>
<style>
    li{
        list-style: none;
    }
    .first li{
        width: 80px;
        display: inline;
        margin: 0 5px;
        border: 1px solid grey;
        border-radius: 5px;
        color: grey;
    }
    .dos li{
        width: 200px;
        margin: 20px 0;
    }
</style>